/**
  * @description: 矢量地图
  * @author: hj
  * @update: hj(2020-01-14)
  */

import React, { Component } from 'react';
import styles from './index.module.scss';
import { getMediaById } from '@/service/Api/Chart';
import { observer,inject,Provider } from 'mobx-react';
import { debuggerStatement } from '@babel/types';
// import { select } from 'd3';

 


const svgMap = [
    {
        name:"锦江区",
        path:"M747.7,516.99c-1.86-3.91-5.01-9.67-7.06-10.23c0,0-0.54-0.75-1.24-1.78c-0.32-0.48-0.67-1.01-1.02-1.57   l-1.12,0.37c-0.47,1.44-2.76,7.81-3.43,10.96c-0.67,3.16-2.29,6.7-1.7,9.27s1.38,8.28,1.18,10.65c-0.2,2.37,2.21,11.26,2.21,11.26   c0.87-0.29,1.91-0.58,3.02-0.8c2.71-0.53,5.85-0.62,7.98,0.8c3,2,7,2,8,1s4-4,4-9l0.72-15.21   C759.24,522.72,749.56,520.9,747.7,516.99z",
        fill:"#022D50",
        text:{
            x:"1020",
            y:"670"
        },
        point:{
            x:"1020",
            y:"650"
        }
    },
    {
        name:"武侯区",
        path:"M690.52,520.92c-1,5-1,12,1,14s6,6,11,6s9-3,10-3s5-1,5,2s0,12,1,13s5,6,9,5s4-1,5-4s0-7,3-8   c0,0-2.4-8.9-2.21-11.26c0.2-2.37-0.59-8.09-1.18-10.65s1.02-6.11,1.7-9.27c0.67-3.16,2.96-9.53,3.43-10.96c0,0,0,0-4.14,0   s-5.52,0.71-9.52,0c-3.99-0.71-3.89-1.26-7.44,0c-3.55,1.26-7.1-2.86-7.1-2.86s-7.1,0.41-13.41,0c-3.87-0.25-7.59,3.59-9.84,6.83   C688.5,510.87,691.29,517.07,690.52,520.92z",
        fill:"#022D50",
        text:{
            x:"970",
            y:"650"
        },
        point:{
            x:"980",
            y:"630"
        }
    },
    {
        name:"青羊区",
        path:"M695.65,500.92c6.31,0.41,13.41,0,13.41,0s3.55,4.12,7.1,2.86c3.55-1.26,3.45-0.71,7.44,0   c3.99,0.71,5.37,0,9.52,0s4.14,0,4.14,0c0.06-0.2,0.45-0.36,1.04-0.49c-1.09-1.74-2.11-3.63-1.95-4.36   c0.03-0.13-0.08-0.37-0.28-0.69c-2.29,1.01-9.95-4.07-11.03-3.7c-1.23,0.43,0.31,0.8-2.45,3.83c-2.76,3.03-2.45-1.19-7.96-3.83   c-5.51-2.64-6.13-4.78-9.19-6.92c-3.06-2.14-1.53-4.29-3.06-0.31s-2.76,5.51-4.29,3.37c-1.53-2.14-2.83-7.75-2.83-7.75h-9.75l-7,5   c0,0-6,0-4,11l3,3c0,0,3,3,6,4c0.69,0.23,1.49,0.9,2.29,1.83C688.06,504.51,691.78,500.67,695.65,500.92z",
        fill:"#022D50",
        text:{
            x:"970",
            y:"620"
        },
        point:{
            x:"965",
            y:"610"
        }
    },
    {
        name:"金牛区",
        path:"M748.4,459.65c-1.75-2.08-4.09-4.36-6.62-5.45c-5.26-2.28-9.31-5.03-11.28-4.66s-3.99-1.59-4.48,4.39   c-0.49,5.98,0.51,9.98,0.51,9.98s2.26,1-0.37,9.5c0,0-0.63,2.5-2.63,4.5s-4.9,3.92-5.95,3.96c-1.05,0.04-3.39-0.43-4.72-2.19   s-2.15-2.58-2.74-2.17c-0.59,0.41-2.52-0.53-7.55,1.94c-5.04,2.47-4.55,2.47-7.29,3.47c0,0,1.3,5.61,2.83,7.75   c1.53,2.14,2.76,0.61,4.29-3.37s0-1.84,3.06,0.31c3.06,2.14,3.68,4.29,9.19,6.92c5.51,2.64,5.21,6.86,7.96,3.83   c2.76-3.03,1.23-3.4,2.45-3.83c1.07-0.37,8.74,4.71,11.03,3.7c0.32-0.14,0.54-0.4,0.61-0.82c0.61-3.37-3.68-6.43-4.59-14.49   c-0.92-8.06,5.21-2.66,6.74-5.72s6.13-3.98,8.27-3.78s4.42-9.5,4.42-9.5S750.3,461.91,748.4,459.65z",
        fill:"#022D50",
        text:{
            x:"980",
            y:"600"
        },
        point:{
            x:"1000",
            y:"610"
        }
    },
    {
        name:"成华区",
        path:"M785.52,492.92c-2.99-3.98-9.39-7.99-9.45-8.02c0,0,0,0,0,0c-0.06-0.03-6-3.16-11.26-4.07   c-5.29-0.91-8.14-4.19-10.71-8.05c-1.99-2.99-2.44-6.65-2.54-8.16c-0.01-0.12-0.17-0.13-0.2-0.02c-0.56,2.2-2.45,8.99-4.25,8.82   c-2.14-0.2-6.74,0.71-8.27,3.78s-7.66-2.34-6.74,5.72c0.92,8.06,5.21,11.12,4.59,14.49c-0.08,0.42-0.29,0.68-0.61,0.82   c0.2,0.32,0.31,0.55,0.28,0.69c-0.16,0.74,0.86,2.63,1.95,4.36c0.03,0.04,0.05,0.08,0.07,0.12l1.02,1.54   c0,0.02,0.01,0.03,0.02,0.05c0.62,0.92,1.12,1.61,1.21,1.74c0.01,0.02,0.02,0.02,0.04,0.03c2.06,0.6,5.18,6.33,7.03,10.22   c1.74,3.66,10.35,5.49,11.43,5.7c0.06,0.01,0.11-0.03,0.12-0.1l0.27-5.67v-10.19v-3.8c0-0.01,0-0.01,0-0.01   c0.03-0.14,1.07-4.98,6-4c5,1,14,1,17,0S788.52,496.92,785.52,492.92z",
        fill:"#022D50",
        text:{
            x:"1030",
            y:"610"
        },
        point:{
            x:"1025",
            y:"620"
        }
    },
    {
        name:"龙泉驿区",
        path:"M802.02,482.92c-0.5,0-7.21,0.4-8.36,0.2s-4.14-0.2-5.14,0.8s-5.5,5.5-5.5,5.5s3.67,3.35,3.58,5.42   c-0.08,2.08-0.08,3.08-4.08,4.08s-12.04,0.76-14.52,0.38c-2.48-0.38-6.76-0.38-7.62,1.62s-1.14,21.79-1.14,21.79   s-0.3,15.87-1.01,18.04c-0.71,2.17-1.71,5.17-3.71,6.17l16,17c0,0,9,12,10,13s4,4,5,3s1-1,1-1s-0.51-1.67,0.24-3.83   c0.76-2.17,6.24-6.29,9.5-7.73c3.26-1.44,5.26-2.44,5.26-2.44s6.57,0.15,8.78,1.57c2.22,1.43,3.66,3.23,6.44,3.83   c2.78,0.6,4.78,1.6,7.78,0.6s3.55-0.54,4.78-2.77c1.22-2.23,1.41-7.97,1.31-10.1s-2.09-7.13,1.91-6.13s8.81,3.08,11.4,2.54   s5.46-2.53,5.46-2.53s1.93-1.41-4.47-5.21c-6.4-3.81-5.43-5.52-5.41-9.16c0.01-3.64-0.11-10.45-0.05-10.05   c0.06,0.4,0.03-3.37,1.54-4.48c0,0,1-2.16,1.76-2.64c0.76-0.48,6.76-2.48,6.76-2.48s1.89-0.89,1.45-5.44l-2.02-6.8   c0,0-1.17-3.92-1.8-5.34s-3.22-3.8-4.92-5.11c0,0-4.95-2.15-5.33-2.23c-0.38-0.08-2.38-1.08-7.38-1.08s-10.87-2.38-10.87-2.38   L802.02,482.92z",
        fill:"#022D50",
        text:{
            x:"1070",
            y:"650"
        },
        point:{
            x:"1080",
            y:"660"
        }
    },
    {
        name:"双流区",
        path:"M766.52,622.92c0,0,6.08-5.44,7.54-7.72c1.46-2.28,2.46-5.28,3.46-7.28s3.05-8.5,4.02-10.25   c0.98-1.75,5.88-5.74,5.93-9.74c0.05-4.01-0.95-9.01-0.95-9.01l-1,1c0,0-2.05,1.1-8.52-7.45c-6.48-8.55-17.38-20.13-17.38-20.13   l-5.1-5.42c0,0-2.3,0-4.65,0c-2.35,0-4.46-2.22-6.9-2.11c-2.45,0.11-7.45,1.11-7.45,1.11s-3,0-3,8c0,0,0.83,2.31-2.08,3.15   c-2.92,0.85-4.13,0.89-5.02,0.87c-0.89-0.02-6.89-5.02-6.89-5.02l-1-13c0,0-0.18-4.36-8.09-0.68s-13.91-0.66-13.41-0.49   s-5.54-1.95-6.02-8.39c-0.48-6.44,0.52-7.44,0.52-9.44s-1.24-9.91-4.12-12.45s-11.88-6.55-11.88-9.55l-6.33,6.91   c0,0-6.02,5.65-6.84,7.87c-0.82,2.22-5.82,5.22-5.82,5.22s-3.9,0.4-7.45,0.2c-3.55-0.2-3.55-0.2-3.55-0.2s0,1-3,2   s-3.81-1.39-3.81-1.39l3.81,13.39c0,0,4,7,4,8s-0.18,7.22,1,8c3,2,4,3,6,7s4,7,6,9s10,0,10,0s3,1,4,1s5,2,5,3s0,5,3,8s8,5,9,9   s2,9,0,12s-3,0-4,5s-2,7-3,11s1,5,0,9s2.53,5.62,2.53,5.62s3.47,3.38,5.47,3.38s4.91-0.5,7.45,6.75c2.55,7.25,1.55,9.25,7.55,12.25   s13,1,15,1s4-1,6,1s5,6,9,7s14,0,14,0s5.23,2.5,7.62-6.25c2.38-8.75-0.03-6.73,0.68-12.24c0.71-5.51,4.54-2.16,6.62-4.83   c2.08-2.68,3.42-1.17,1.25-8.93S766.52,622.92,766.52,622.92z",
        fill:"#022D50",
        text:{
            x:"1000",
            y:"720"
        },
        point:{
            x:"1010",
            y:"730"
        }
    },
    {
        name:"温江区",
        path:"M685.52,482.92l-7,5c0,0-3,0-4,3s0,7,0,8s0,2-3,4s-5,5-8,8c-3,3-3,6-8,8s-9-1-11,0s-1,2-3,2s-5-1-8-7   c-3-6-8-19-8-19s-6-14-5-21c0,0-1-4-3-5s-2.63-1.85-2.63-1.85s3.28-0.25,3.95-5.7c0.67-5.45,0.67-3.45,0.67-3.45l-5.45-5.41   c0,0-2.4-3.3-1.97-6.44c0.43-3.15,0.43-3.15,0.43-3.15s-5.59-13.21-5.29-14.61c0.29-1.39,1.29-2.39,1.29-2.39l4.55,8.71l8.45,6.29   c0,0,7.87,4.95,8.93,5.97s9.07,7.03,11.07,11.03s12,15,20,16s17.08,5.96,17.08,5.96L685.52,482.92z",
        fill:"#022D50",
        text:{
            x:"915",
            y:"610"
        },
        point:{
            x:"925",
            y:"620"
        }
    },
    {
        name:"郫都区",
        path:"M614.52,424.92c-4,0-6.38,0.92-6.38,0.92l3.38,7.08c0,0,4,5,10,8s17,12,20,17s11,14,20,16s24,9,24,9s4,0,8,0   s8-3,10-4s7-2,8-1s9-5,9-11s-6-13-6-13s-2-6-5-7s-12-11-14-11s-5,0-7-2s-4-7-3-11s-2-14-11-17s-18-4-18-4s-15.22-7.96-23.86-10.69   c-6.85-2.17-5.52,1.81-5.08,5.49c0.48,4.05,1.66,10.34,0.83,15.58",
        fill:"#022D50",
        text:{
            x:"930",
            y:"580"
        },
        point:{
            x:"960",
            y:"560"
        }
    },
    {
        name:"新都区",
        path:"M760.02,424.42c0,0,0,8,5,9s16,0,16,0s4,5,5,12s3,19,4,23s7,13,9,14s-9,0-11,2s-5,5-5,5s-6-5-13-7s-10-3-14-7   s-4-11-4-11s-6-9-12-11s-11-6-13-3s-1,13,0,14s0,11-4,14s-6,4-8,3s-4-4-4-4s8-2,9-10s-6-14-6-14s-6-8-5-7s-6.9-5.4-6.9-5.4   s-3.77-5.89-9.44-5.24s-7.06-6.41-7.36-9.38c-0.3-2.98,1.7-7.98-3.3-14.98l11.37-8.21l11.63-6.79l8.6-5.7c0,0,4.07-2.92,9.73,3.39   c5.67,6.31,7.42,8.52,7.42,8.52l11.33,0.62c0,0,3.92-0.83,5.92,2.17s6,2,6,2s3.32,2.28,6.16,2.14L760.02,424.42z",
        fill:"#022D50",
        text:{
            x:"1000",
            y:"550"
        },
        point:{
            x:"1010",
            y:"560"
        }
    },
    {
        name:"青白江区",
        path:"M822.52,427.92c0,0-5,13-6,16s-1,10,5,14s4,3,10,4s18,0,18,0s5,0,6,0s2,5,0,7s-5,6-3,9s5,2,7,5s1,12,0,14   s-9,2-10,3s-2,1-2,1s-3-5-6-6s-5-3-12-3s-20-6-20-6l-10-4c0,0-3.84-1.09-6.42-7.05c-2.58-5.95-4.76-6.76-5.17-17.36   c-0.41-10.59-3.06-18.47-5.23-21.53c-2.18-3.06-2.18-3.06-2.18-3.06s-13.92,1.88-16.96-0.06c-3.04-1.94-3.99-7.79-3.52-10.87   s0.47-12.07,0.47-12.07s12-1,12,0s1.58,7.21,1.79,7.11c0.21-0.11,1.34,3,5.27,0.95c3.94-2.05,8.94-5.05,10.94-7.05l19,1   c0,0,0,5,2,6s9,6,10,8S822.52,427.92,822.52,427.92z",
        fill:"#022D50",
        text:{
            x:"1080",
            y:"570"
        },
        point:{
            x:"1090",
            y:"580"
        }
    },
    {
        name:"金堂县",
        path:"M850.52,510.92c0,0,2,5-1,7s-8,1-8,5c0,0,1.65,1.67,4.83,3.34c3.17,1.66,5.17,3.66,10.17,2.66   s13.4-3.88,17.7-6.94c4.3-3.06,5.3-3.06,6.3-6.06s5-7,10-5c5,2,14,6.27,16.5,7.64c2.5,1.36,5.5,3.36,5.5,3.36s3.09,1.24,6.54,1.12   c3.46-0.12,7.46-1.12,7.46,0.88s-3.67,11.58-2.84,14.79c0.84,3.21,4.58,6.95,9.71,12.08s13.13,13.13,13.13,13.13   s9.71,5.29,17.85,1.64s9.56-4.37,10.85-4.5c1.29-0.14,5.29-0.14,12.29,0.86s6.89-3.88,6.94-6.44c0.06-2.56,0-12.95,0-12.95   s1.06-4.61-8.94-1.61c0,0-3-7-6-8s-9.88,4.17-5.94-6.41c0,0,1.14-2.54,2.04-5.56c0.9-3.02,0.9-10.02,0.9-10.02s-5-4-8-3   c0,0-1.07-8.57-5.04-10.79c-3.96-2.21-5.91-1.61-6.44-3.91c-0.52-2.3,2.72-3.71,4.1-5.51s2.24-3.65-3.69-3.22s-6.93-0.57-8.93-2.57   s-2-10-5-14s-8.01-2.17-10-7.58c-2-5.42-3,0.58-3-10.42s-10.79-10.14-17.39-12.57c-6.61-2.43-21.11-6.24-25.86-9.34   c-4.75-3.09-12.75-7.09-11.75-21.09c0,0-8.74-11.09-18.37-11.54s-9.63-0.46-9.63-0.46s-6.51,4.76-10.25,5.38   s-18.31,2.28-21.53,3.95c-3.22,1.67-6.22,6.67-6.22,6.67s-1,4,2,7s12,7,11,10s-5.98,14.13-6.49,19.57   c-0.51,5.43,5.49,10.43,5.49,10.43s1.49,2.68,5.74,3.34c4.26,0.66,12.82,1.25,17.54,0.95c4.72-0.29,10.72-0.29,10.72-0.29s3,4,0,7   s-5,6-3,9s5,2,7,5s1,10,0,14c0,0,0.73-0.05-5.63,1.98s-6.37,2.02-6.37,2.02L850.52,510.92z",
        fill:"#022D50",
        text:{
            x:"1180",
            y:"600"
        },
        point:{
            x:"1190",
            y:"610"
        }
    },
    {
        name:"简阳市",
        path:"M975.02,563.42c0,0,0,13-2,21s2,12,1,18s2,9-6,9s-8-4-13,4s-7,25-14,26s-12,5-16,6s-6-2-7-5s0-3-6-5   s-11-1-14-3s-8-1-11,5s-10,7-12,8s3,19-3,18s-8-5-11-5s0-2-7,5s-1,13-8,14s-9-5-10,0s-2,9-7,3s-11-16-14-19s-13,0-16-3   s-15-13-15-13s-11,8-14-3s-3-10-3-10s-2.23-9.78-2.12-10.89s0.4-1.15,0.4-1.15s0.42-0.32,1.21,0.54c0,0,6.43-5.7,7.54-7.72   s4.23-9.08,4.64-10.2c0.41-1.12,1.98-6.17,2.84-7.33c0.86-1.16,2.25-2.7,4.86-6.3c2.61-3.59,0.28-8.66,0.12-12.45   c-0.17-3.8,0.05-4.18,2.28-6.44c2.23-2.26,5.77-4.31,7.46-5.12c1.69-0.81,5.26-2.44,5.26-2.44s3.77,0.06,5.75,0.57   c1.98,0.51,2.46,0.56,4.6,2.13c2.14,1.57,1.94,1.56,2.81,1.95c0.87,0.39,5.33,1.55,5.33,1.55s2.55,0.59,4.52-0.2   c1.97-0.79,2.45-0.46,3.46-1.14c1-0.68,2.03-2.45,2.3-5.26s0.3-5.96,0.1-8.08s-0.56-3.66,0.09-4.23c0.66-0.57,1.3-0.58,4.01,0.26   c2.71,0.84,5.28,1.62,6.19,1.79c0.9,0.17,2.74,0.58,4.45-0.14c1.71-0.72,3.86-1.7,4.26-2.19c0.4-0.48,0.36-1.13-0.14-1.75   c-0.51-0.62-0.7-1.05-2.8-2.5c-2.1-1.45-2.51-1.5-3.45-2.2c-0.94-0.71-1.89-1.41-2.43-2.16c-0.55-0.74-1.08-1.02-1.07-4.83   c0.01-3.81-0.04-9.42-0.04-9.42s-0.24-5.26,1.56-6.05l0.52-0.11l4.83,3.34c0,0,2.52,1.62,3.89,2.12c1.36,0.49,3.5,1.39,7.06,0.42   s7.82-2.02,12.14-4.15s8.34-5.07,8.66-5.32c0.33-0.25,2.04-1.64,2.21-2.82c0.17-1.18,1.65-3.92,3.72-4.97   c2.07-1.05,3.58-1.53,5.44-0.95c1.86,0.58,5.32,2.15,5.32,2.15l5.87,2.68l5.57,2.71c0,0,3.56,1.78,5.17,3.05   c1.61,1.27,4.28,1.87,7.67,1.85c3.38-0.02,6.01-0.86,7.08,0.06c1.08,0.92-0.38,3.94-1.19,7.15c-0.81,3.2-1.2,5.05-1.27,5.68   c-0.07,0.62-0.42,2.22,0.29,3.64s6.15,7.93,6.15,7.93l8.17,8.2l8.23,8.23c0,0,6.69,3.67,12.69,2.92c6-0.74,12.56-4.59,12.56-4.59   s2.48-1.14,3.46-1.2L975.02,563.42z",
        fill:"#022D50",
        text:{
            x:"1140",
            y:"700"
        },
        point:{
            x:"1150",
            y:"710"
        }
    },
    {
        name:"新津县",
        path:"M618.85,607.91c0,0-2-5-8-8s-3-8-2-10s7-8,7-10s-1-10,1-12s4-8,8-7s7,1,9,2s5-2,6-5s3-5,5-7s2.29-2,4.65,0   c2.35,2,4.6,8.85,6.98,11.42s1.26,4.29,6.82,3.43c5.56-0.86,1.56-1.86,5.56-0.86s9,1,9,4s0,5,3,8s8,5,9,9s2.15,5.56,1.08,8.78   c-1.08,3.22-1.01,4.53-4.04,5.38c0,0-2.51,8.12-2.77,9.48s-1.03,5.57-1.15,9.47s-1.12,7.9-1.12,7.9s-7.21,0-8.61,0   c-1.39,0-13.72-0.79-15.56-0.39c-1.84,0.39-8.14-0.43-10.99-0.52c-2.85-0.09-5.26-0.65-7.55,2.13c-2.29,2.78-5.82,4.63-7.56,5.71   s-6.46,0.38-6.46,0.38s0.72-2.31-0.28-4.31s-3-7-4-8s-1-4-1-6S618.85,607.91,618.85,607.91z",
        fill:"#022D50",
        text:{
            x:"920",
            y:"720"
        },
        point:{
            x:"930",
            y:"730"
        }
    },
    {
        name:"蒲江县",
        path:"M588.52,659.92c0,0-3,0-3,3s-1.02,10.02-6.01,11.51s-6.34,2.04-15.17,0.77s-6.83-1.28-8.83,1.72s-3,10-5,12   s-1.63,5.81-7.31,11.41c-5.69,5.59-6.85,4.03-8.27,4.31s-6.42,1.28-8.42,3.28s-4,4-7,5s-3-3-6-2c-3,1-3,4-5,4s-4.29-1.32-6.15-1.66   c-1.85-0.34-8.46,2.08-10.16-2.63c-1.7-4.71-3.43-8.79-2.56-18.25c0.87-9.46,2.35-16.01,1.61-19.74c-0.74-3.72-1.74-6.72-1.74-6.72   s-4.91-2.24-5.45-3.12c-0.55-0.88-6.55-3.88-6.55-3.88s-1-8-3-8s4,0,4,0s-2.62-9.2,3.19-11.1c5.81-1.9,16.81-4.9,22.81-12.9   c0,0,4.05-3.82,10.03-0.41c5.97,3.41,8.28,0.37,10.13-0.11c1.85-0.48,9.78-2.64,19.32-2.06c9.53,0.58,10.43,1.49,11.48,2.53   c1.05,1.04,1.05,6.04,1.05,6.04h5c0,0,1.73-3.92,3.87-3.46c2.13,0.46,7.13,2.46,7.13,2.46s0.64,1.03,3.82,1.02   s14.18-0.02,14.18-0.02s5,2,5,4s1,6,1,6l-2,15C594.52,657.92,591.52,660.92,588.52,659.92z",
        fill:"#022D50",
        text:{
            x:"800",
            y:"780"
        },
        point:{
            x:"810",
            y:"790"
        }
    },
    {
        name:"邛崃市",
        path:"M590.52,632.92c0,0,5,2,5,4s1,6,1,6s0.79,0,3.9,0c3.1,0,9.84,1,10.97,0c1.13-1,4.13-1,4.13-1s1-6,5-7   s3.63-0.52,4.61-0.71c0.98-0.18,1.25-2.34-2.68-8.81s-2.93-9.48-2.93-9.48s1.43-8.07-5.28-13.54c-6.72-5.46-4.72-2.46-6.72-5.46   s0-7,0-7s0.1-4.6-8.45-9.8c0,0-2.81-1.2-3.68-1.2c-0.87,0-4.87,1.2-4.87,2.6s1,1.4,0,4.4s0.78,4.2-1.11,5.1   c-1.89,0.9-13.89,0.9-13.89,0.9s-14,1-17-3s-4.73-8.08-4.73-8.08s-1.11-3.23-3.19-4.58s-9.56-5.25-9.32-5.29s-2.76-2.05-2.76-2.05   s-1.11-1.73-3.56-1.36c-2.44,0.36-4.44,1.36-6.44,0.36s-2.25-0.17-3.13-1.58c-0.87-1.42-2.57-4.34-2.72-5.88   c-0.15-1.54,0.85-7.54,0.85-7.54s0.89-2.71-4.56-3.36c0,0-6.99-1.61-6.72-1.63c0.27-0.02-8.73-1.02-11.73-2.02s-4.2-1-6.1,0   c-1.9,1-4.98,1.69-4.98,1.69s-6.92,0.31-6.92,1.31s-0.09,5.59-0.54,6.29c-0.46,0.71-0.46,0.71-1.46,1.71s-7,3-7,3   s-7.95,2.96-11.48,1.98c-3.52-0.98-4.14-0.98-5.33-2.98c-1.19-2-5.19-3-7.19-3s-3.53,2.66-4.27,3.33   c-0.73,0.67-3.73,3.67-3.73,3.67s-4.4,7.62-9.7,11.81c-5.3,4.19-5.22,14.02-5.26,20.61c-0.04,6.59-1.04,30.59-1.04,30.59   s-8.97-0.3-14.99,9.35c0,0-4.45,7.61-4.73,19.13c0,0-0.38,4.54,1.17,7.53c1.55,2.99,5.8,5.15,5.67,5.07   c-0.12-0.08,4.53,2.8,7.2,2.86s11.23,1.32,14.45,0.69s2.96-2.78,4.59-5.21c1.63-2.42,8.63-11.42,8.63-11.42s3.87,3.86,9.43,3.93   c5.57,0.07,5.57,0.07,5.57,0.07s0.13-2.43,1.07-3.22c0.93-0.78,4.5-3.45,4.72-3.12c0.21,0.33,6.21-0.67,6.21-0.67h4c0,0-1-8,1-10   s20-5,25-14c0,0,4-4,13,1c0,0,3,1,9-2s27-1,27-1s3,2,3,5s0,3,0,3s3,1,5,0s3-5,6-3s3,0,5,2S590.52,632.92,590.52,632.92z",
        fill:"#022D50",
        text:{
            x:"750",
            y:"720"
        },
        point:{
            x:"760",
            y:"730"
        }
    },
    {
        name:"大邑县",
        path:"M410.32,449.51c0,0-10.22-0.93-19.01,0.24c-8.79,1.17-2.97,4.91-0.88,5.54c2.09,0.63,11.62,8.94,13.86,11.78   c2.23,2.85,8.75,3.75,12.49,11.8c3.74,8.05,5.74,7.05,4.74,10.05s-3.33,19.59-3.67,21.8c-0.33,2.2-1.84,8.77-1.09,12.49   c0.75,3.72,10.75,2.72,9.75,3.72s5.26,0.77,7.13,6.89s4.67,6.88,5.77,8c1.1,1.12,5.1,7.12,4.1,12.12c0,0,0.43,5.36-2.29,9.18   c-2.71,3.82,6.29-7.18,8.29-7.18s4-1,6,1s1,5,4,5s12,0,14-2s6-1,7-2s-3,1,0-1s2-7,2-8s1-1,2-1s5,0,8-1s3-2,8-1s13,2,16,3s7,1,7,4   s-2,7,0,10s1,4,5,5s7-2,10,1s13,7,14,9s3,8,6,11s13,3,17,3s12,0,12,0c3,0,2-3,3-6s-2-4,2-6s5-1,9,2s7,8,7,8l7-10c0,0-1-7.12,0-9.56   s4.57-8.89,5.78-8.67c1.22,0.23,0.22-0.77,3.22-0.77s6,1,6,1s-0.92-4.37-1.46-6.18c-0.54-1.82-1.38-3.36-2.46-4.59   c-1.08-1.23-7.34-6.96-8.21-7.59c-0.87-0.63-4.62-4.03-10.24,0.67s-14.23,12.79-14.23,12.79s-4.39,4.91-7.39,0.91l-1-6   c0,0-15,2-18,1s-4-6-4-6v-13c0,0,1-2,4-5s-0.11-8.86-0.06-9.43c0.06-0.57-3.94-6.57-4.94-8.57c-1-2-0.13-9.58-1.57-13.29   c-1.43-3.71-1.25-5.61-4.34-7.66s-4.58-3.56-12.33-5.3c-7.76-1.75-12.18-3.14-12.18-3.14s-3.54-1.48-5.56-2.54   c-2.02-1.07-4.55-0.45-5.78-0.76s-5.28-0.71-5.28-0.71s-3.35,0.24-5.15,0.32c-1.8,0.08-4.8-0.92-6.8-0.92s-6.17,4.51-7.59,5.75   s-4.99,4.26-6.2,0.25c-1.21-4.01-2.04-6.21-2.04-6.21l-0.17-1.8c0,0-1-1-3,3s0,4-7,5c0,0-5.21,0.28-6.11-2.36   c-0.89-2.64-0.66-6.62-2.28-7.13s-2.36-1.88-8.99-1.19c-6.63,0.69-15.83,2.66-18.23,1.17c0,0-4.77-0.02-7.59-4.25   c-2.82-4.23-7.59-5.93-7.59-5.93s-1.22-0.3-2.22-3.3s-5-8-5-8s-6-2-7-2S410.32,449.51,410.32,449.51z",
        fill:"#022D50",
        text:{
            x:"780",
            y:"650"
        },
        point:{
            x:"790",
            y:"640"
        }
    },
    {
        name:"崇州市",
        path:"M615.52,541.92c0,0,6,3,8,6s5,4,5,6s2,3,2,6s0,2.04,0,2.04s3.12,1.29,3.56,1.13c0.44-0.17,1.83,0.15,3.63-2.01   c1.81-2.16,2.29-4.64,2.55-4.9c0.26-0.26,1.05-2.02,3.15-4.14c2.11-2.12,2.49-3.12,3.3-2.62c0,0-1.12-1.42-1.16-4.96   c-0.03-3.54-0.26-3.89-1.15-6.21c-0.88-2.33-3.34-4.46-3.61-7.89s-2.68-9.43-2.68-9.43l-4.59-7l-9.63-23.21   c0,0-3.58-10.52-3.47-14.65c0.11-4.14-1.22-5.37-1.22-5.37l-4.68-3.76c0,0-2.11,0.59-5.56-0.21c-3.44-0.79-7.32-1.6-8.38-1.2   c-1.06,0.41-11.13-0.39-11.13-0.39s-3.94-0.2-5.94-1.2s-7.32-6.6-8.16-8.3c-0.84-1.7-1.08-3.68-2.46-5.69   c-1.38-2.01-3.91-3.75-6.14-4.38c-2.24-0.63-2.9-1.86-11.07-3.24c-8.17-1.39-10.92-5.69-11.55-7.04s-2.23-4.49-5.93-4.42   c0,0-7.34-1.23-7.02-1.08c0.32,0.15-9.32-1.63-9.32-1.63s-4.98-2.11-5.17-2.17c-0.19-0.05-9.19,1.95-15.19,8.95   s-7.81,11.91-11.41,11.45c-3.59-0.45-16.02-6.45-18.31-6.95c-2.29-0.5-9.42-4.49-13.35-4.49c-3.94-0.01-14.94-0.01-16.94,0.99   s-4.21,7.36-8.6,10.68c-4.4,3.32-7.31,5.27-11.85,3.79c-4.54-1.48-1.54,1.52-1.54,1.52s4,4,5,8s3,3,5,5s5,4,7,6s7,3,9,3s17-2,17-2   s7-1,8,4s0,7,7,7s6-3,7-5s3-4,3-3s0,2,1,4s1,7,4,6s9-8,11-8s6,1,8,1c2,0,5-1,8,0s6,0,9,2s12,4,17,5s13,4,15,11s1,13,2,15   c1,2,6,9,6,12s0,4-1,6s-3,2-4,5s0,12,0,13s2,5,4,6s18-1,18-1l1,6c0,0,2,3,5,1s12-11,12-11S610.52,540.92,615.52,541.92z",
        fill:"#022D50",
        text:{
            x:"790",
            y:"580"
        },
        point:{
            x:"800",
            y:"590"
        }
    },
    {
        name:"都江堰市",
        path:"M598.52,244.92c0,0,3-4,6-2s2,8,2,8s6,10,6,12s0,8,0,8s4,5,2,8s-8,9-10,20s4,12,4,12s12,1,13,5s-2,17,0,21   c0,0,9,8,10,9s1,5-2,5s-7-2-8,0s3,7,3,7s2,2,2,8s1,7,6,6s0,20,0,20s-4-3-5,0s2,16,1,20s-7,13-14,13s-8,1-7,5s5,13,5,13s-1,4,0,7   s6,7,7,8s-2,6-3,8s-7,1-12,0s-18,0-21-2s-8-7-9-10s-1-5-7-8s-8-2-16-5s-7-7-10-9s-17.76-2.19-23-5c-5.24-2.81,1.97,1.45,7.98-4.27   c6.02-5.73,9.02-6.73,11.02-18.73s7-11,12-16s10-6,8-14c0,0-11-8-8-18s6.55-17.03,9.78-21.51c3.22-4.49,8.31-20.65,8.31-20.65   s4.17-10.55,3.54-21.69c-0.63-11.14-4.39-21.9-3.51-28.02c0.88-6.12-0.8-14.09,10.04-14.61c10.84-0.52,15.84-2.52,15.84-2.52   L598.52,244.92z",
        fill:"#022D50",
        text:{
            x:"860",
            y:"500"
        },
        point:{
            x:"870",
            y:"510"
        }
    },
    {
        name:"彭州市",
        path:"M626.52,365.92c0,0-1.5,7.56,4.25,6.28c5.75-1.28,3.97,8.88,3.97,8.88l-2.08,10.15l6,2.18   c0,0,12.86,4.51,17.86,8.51c0,0,13,1,18,4s7.95,5.7,7.47,5.35c0,0,18.53-13.35,22.53-15.35s9-6,12-6s7,3,9,8s6,5,9,5s11,0,13,2   s6,2,6,2s6.17-19.13,5.08-25.56c-1.08-6.44-9.08-6.44-9.08-6.44s-9.91-12.8-13.96-13.9c-4.04-1.1-4.27-0.57-5.66-2.33   s2.47-1.47,1.54-4.61c-0.93-3.15-0.59-4.69-6.76-8.92c0,0-3.73-0.86-7.95-2.54c-4.22-1.68-8.22-13.68-10.22-24.68c0,0-1-8-14-19   l-8-10c0,0-4-20-12-28c0,0,9-9,9-15s-3-15-9-19s-12-2-16-2s-17.56-5-21.78-6.5s-10.22,1.5-8.22,8.5c0,0-2.93,5.15-14.97,8.07   c-12.03,2.93-11.03,4.93-7.03,6.93s2,9,2,9s6,8,6,12s0,8,0,8s5,4,2,8s-10,15-10,20s-2,8,4,12c0,0,7.69-0.13,10.35,2.43   c2.65,2.57,4.34,0.43,2,20.5l0.66,3.07c0,0,8,7,10,9s0,5-2,5s-5.99-0.88-5.99-0.88s-4.76,0.48-0.38,5.68",
        fill:"#022D50",
        text:{
            x:"930",
            y:"450"
        },
        point:{
            x:"940",
            y:"460"
        }
    }]; 






@inject('chartStore') 
@observer


class BigVectorMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            params: [],
            data: [],
            forceFit: true, //forceFit自动试用宽度，默认false
            width: this.props.data.width ? this.props.data.width : '100%',   // 固定宽度    当自适应宽度开启，此功能失效
            height: this.props.data.height ? this.props.data.height - 5 : '100%',
            condition: this.props.data.condition ? this.props.data.condition : '',
            pageFlag: this.props.data.pageFlag ? this.props.data.pageFlag : '',
            nofirst: this.props.data.nofirst ? this.props.data.nofirst : '',
            color: this.props.data.color,
            title: '',
            chartId: this.props.data.chartId,
            id: this.props.data.componentId,
            chartData: [],
            axisArr: {},
            haveData: false,

            // 地图数据
            mapData: {
                area: '',
                data: []
            },

            dataNull: false, // 暂无数据

            // 全局变量
            mainData: [], // 操作组件可操作数据
            mainName: '', // 操作组件可操作当前维度
            mainFlag: false, // 是否是操作组件
        };
    };


    componentWillMount() { //初始化
        const _this = this;
        
        // 预览界面
        if (_this.state.pageFlag == 'preview') {
            // 判断当前组件是否是可操作组件
            const { globalData } = _this.props.chartStore;
            if (globalData.slice().length > 0) {
                globalData.slice().map((item,index) => {
                    if (item.affect == _this.state.chartId) { // 可操作组件
                        let affectName = item.affectDimension;
                        _this.setState({
                            mainFlag: true,
                            mainName: affectName
                        })
                    }
                })
            }

            _this.interfaceRequest(_this.state.chartId,_this.state.condition);
        } else { // 配置面板
            if (_this.state.nofirst == 'nofirst') {
                _this.saveHandleData();
            } else {
                _this.interfaceRequest(_this.state.chartId,_this.state.condition);
            }
        }
    }

    // 钩子函数--组件挂载完成后
    componentDidMount() { //初始化
        this.setState({
            haveData: true
        })
    }
    // 接收父组件的数据改变
    componentWillReceiveProps = (nextProps) => {
        const _this = this;
        const { globalData } = _this.props.chartStore;

        // 预览界面---判断是否是变化组件
        if (nextProps.data.pageFlag == 'preview') {
            if (nextProps.data.condition != this.props.data.condition && globalData.slice().length > 0) {
                globalData.slice().map((item,index) => {
                    if (item.affectFlag && item.require == nextProps.data.chartId) { // 联动组件
                        let key = item.requireDimension;
                        let condition = {};
                        Object.keys(nextProps.data.condition).forEach(function(keys){
                            condition[key] = nextProps.data.condition[keys];
                        })
                        _this.interfaceRequest(nextProps.data.chartId,condition);
                    }
                })
            }
        }
    }

    // 数据接口请求
    interfaceRequest = (chartId,condition) => {
        let data = {
            charId: chartId,
            condition: condition
        };
        this.getMediaById(data);
    }
    
    // 数据存储刷新
    saveHandleData = () => {
        const { chartArrData } = this.props.chartStore;
        if (chartArrData.slice().length > 0) {
            chartArrData.slice().map((item) => {
                if (item.id == this.state.chartId) {
                    this.setState({
                        haveData: false
                    },function() {
                        // 数据处理
                        this.handleData(item.data);
                    })
                }
            })
        }
    }

    async getMediaById(data) {
        const res = await getMediaById(data);
        if (res.data && res.data.code === 0) {
            let str = res.data;
            if (str.data && str.data.data && str.data.data.length > 0) {
                // 存储图例原始数据
                const { saveChartData } = this.props.chartStore;
                let oldData = {
                    id: this.state.chartId,
                    data: str.data.data
                }
                saveChartData(oldData);

                // 数据处理
                this.handleData(str.data.data);
            } else {
                this.drawMap();
            }
        }
    }
    // 数据处理
    handleData = (storeAllData) => {
        let storeData = storeAllData[0];
        const _this = this;

        // 存储可操作组件数据
        if (storeData.affect && storeData.affect.length > 0) {
            let obj = {
                id: this.state.chartId,
                label: storeData.title,
                dimensionData: []
            }
            const { saveAffectData } = this.props.chartStore;

            let dimensionData = [];
            storeData.affect.slice().map((item,index) => {
                dimensionData.push(item);
            })
            obj.dimensionData = dimensionData;
            saveAffectData(obj);

            let newNameData = [];
            let mainName = this.state.mainName;
            storeData.data.map((item,index) => {
                Object.keys(item).forEach(function(key){
                    if (key == mainName) {
                        newNameData.push(item[key]);
                    }
                })
            })
            console.log('VectoeMap----',newNameData);
            this.setState({
                mainData: newNameData
            })
        }
        // 存储联动组件数据
        if (storeData.requires && storeData.requires.length > 0) {
            let obj = {
                id: this.state.chartId,
                label: storeData.title,
                dimensionData: []
            }
            const { saveRequireData } = this.props.chartStore;

            let dimensionData = [];
            storeData.requires.slice().map((item,index) => {
                dimensionData.push(item);
            })
            obj.dimensionData = dimensionData;
            saveRequireData(obj);
        }


        // 组装当前图例的维度和度量
        let xyArr = [];
        let xyAxisName = [];
        Object.keys(storeData.columnMaps).forEach(function (key) {
            xyArr.push(key);
            xyAxisName.push({
                key: key,
                name: storeData.columnMaps[key]
            })
        });

        let oldData = storeData.data;
        let newData = [];
        oldData.slice().map((item,index) => {
            let obj = {data: []};
            xyAxisName.map((v,i) => {
                if (v.key == 'area') {
                    obj[v.key] = item[v.key];
                } else {
                    obj.data.push({
                        key: v.key,
                        name: v.name,
                        value: item[v.key]
                    })
                }
            })
            newData.push(obj);
        })
        
        this.setState({
            title: storeData.title,
            chartData: newData,
            haveData: true,
        },function() {
            _this.drawMap();
        })
    }
    


    // 绘制地图
    drawMap = () => {
        const _this = this;

        let dom = document.getElementById('chart_'+this.state.id+'_'+this.state.chartId);
        let svg = d3.select(dom)
            .append('svg')
            .attr('width', '100%')
            .attr('height', '100%')
            .attr('version', '1.1')
            .attr('xmlns', 'http://www.w3.org/svg/2000')
            .attr('viewBox', '0 0 1920 1080')
            .attr('transform', 'scale(2)');
        // 添加地图阴影
        svg.append('g')
        // let pathBgSvg = svg.append('g')
            .classed('path-group-bg', true)
            .attr('style','transform: scale(0.5) translate(22%,40%);')
            .append('image')
            .attr('xlink:href', require('./images/bg.png'))
            .attr('width', '100%')
            .attr('height', '100%');

        // 记录前一个选中的path
        let prevNum = 2;
        //添加地图
        svg.append('g')
            .classed('path-group', true)
            .attr('style','transform:translate(0px,30px);')
            .selectAll('path')
            .data(svgMap)
            .enter()
            .append('path')
            .attr('stroke','#72F1F8')
            .attr('stroke-opacity', 0.8)
            .attr('stroke-width',2)
            .attr('d', function(d, i){
                return d.path;
            })
            .attr('fill', function(d, i){
                return d.fill;
            })
            .attr('fill-opacity', 0.8)
            .attr('name', function(d, i){
                return d.name;
            })
            .attr('style','cursor:pointer;')
            .on('click', function(d, i){ 
                // document.getElementsByTagName('path')[prevNum].setAttribute('fill', '#022D50');
                // prevNum = i;
                // this.setAttribute('fill', '#72F1F8');
            })
            .on('mouseover',function(d,i) {
                if (document.getElementById('vectorMap-line')) {
                    let lineBox = document.getElementById('vectorMap-line')
                    lineBox.parentNode.removeChild(lineBox);
                    document.getElementById('vectorMap-toolTip').style.display = 'none';
                }
                document.getElementsByTagName('path')[prevNum].setAttribute('fill', '#022D50');
                prevNum = i;
                this.setAttribute('fill', '#72F1F8');
                // 添加区域信息弹框
                let lineSvg = svg.append('g').classed('line-group', true).attr('id','vectorMap-line');

                // 显示当前区域数据
                if (_this.state.chartData.length > 0) {
                    _this.state.chartData.map((item,index) => {
                        if (item.area == d.name) {
                            _this.setState({
                                mapData: {
                                    area: d.name,
                                    data: item.data
                                }
                            },function() {
                                _this.showDailog(lineSvg,d);
                            })
                        }
                    })
                }
            })
            .on('mouseout',function() {
                document.getElementsByTagName('path')[prevNum].setAttribute('fill', '#022D50');
                _this.setState({
                    mapData: {
                        area: '',
                        data: []
                    }
                })
                let lineBox = document.getElementById('vectorMap-line')
                lineBox.parentNode.removeChild(lineBox);
                document.getElementById('vectorMap-toolTip').style.display = 'none';
            })

        //添加文本
        svg.append('g')
            .classed('text-group', true)
            .attr('style','transform:translate(-14%,-8%);')
            .selectAll('text')
            .data(svgMap)
            .enter()
            .append('text')
            .text(function(d, i){
                return d.name;
            })
            .attr('fill', '#97FAFF')
            .attr('x', function(d){
                return d.text.x;
            })
            .attr('y', function(d){
                return d.text.y;
            })
            .attr('style', 'font-size:12px;font-family:PingFangSC-Semibold;pointer-events: none;');

          //添加标注点
        svg.append('g')
            .classed('circle-group',true)
            .attr('style','transform:translate(-14%,-8%);')
            .selectAll('circle')
            .data(svgMap)
            .enter()
            .append('circle')
            .attr('r', function(d){
                return 2;
            })
            .attr('cx', function(d){
                return d.point.x;
            })
            .attr('cy', function(d){
                return d.point.y;
            })
            .attr('fill', '#72F1F8')
            .attr('style', 'pointer-events: none;');


        if (_this.state.chartData.length > 0) {
            // 默认选中“青羊区”
            document.getElementsByTagName('path')[prevNum].setAttribute('fill', '#72F1F8');
            // 添加区域信息弹框
            let lineSvg = svg.append('g').classed('line-group', true).attr('id','vectorMap-line');
            _this.state.chartData.map((item,index) => {
                if (item.area == '青羊区') {
                    _this.setState({
                        mapData: {
                            area: item.area,
                            data: item.data
                        }
                    },function() {
                        _this.showDailog(lineSvg,svgMap[prevNum]);
                    })
                }
            })
        }
        
    }

    // 画线及显示弹框
    showDailog = (lineSvg,d) => {
        lineSvg.append('line')
            .attr('style','transform:translate(-14%,-8%);')
            .attr('stroke', '#72F1F8')
            .attr('stroke-width', 2)
            .attr('x1', d.point.x)
            .attr('y1', d.point.y)
            .attr('x2', 1400)
            .attr('y2', 520);

        document.getElementById('vectorMap-toolTip').style.display = 'block';
    }

    // 改变全局变量
    onGlobalVariable = (val) => {
        this.props.onGlobalVariable(val);
    }



    render() {
        const _this = this;
        let Layer = this.props.layer;

        let cardData = _this.state.chartData;

        return (
            <div id={this.state.id+'_'+this.state.chartId} style={{zIndex: 9999,width: this.state.width,height: this.state.height,overflow: 'hidden',padding: '5% 3% 7% 3%'}}>
                <Layer width={this.state.width} title={this.state.title} chartId={this.state.chartId} choiceData={this.state.mainData} onGlobalVariable={this.onGlobalVariable}></Layer>
                <div className={styles.mapBox}  id={'chart_'+this.state.id+'_'+this.state.chartId} style={{height: this.state.height * 0.9}}>
                    <div className={styles.mapTooltip} id="vectorMap-toolTip" >
                        <p className={styles.title}> { this.state.mapData.area } </p>
                        {this.state.mapData.data.length>0 && this.state.mapData.data.map((v,i) => {
                            return (
                                <p className={styles.info}>
                                    <span className={styles.infoValue} style={{color: i==0 ? '#D6BB6B' : '#97FAFF'}}> { v.value } </span> 
                                    <span className={styles.infoName}> { v.name } </span> 
                                </p>
                            )
                        })}
                    </div>
                </div>
            </div>

        )
    }


}
export default BigVectorMap;

